<!-- 运单详情-待支付 -->
<template>
  <view class="info_body">
    <view class="card flex_start">
      <image class="img" src="@/assets/images/pages2/willPage/zf.png" />
      <view class="flex_up">
        <span class="tit1">待支付 ￥{{ Number(allPay) + Number(saveMoney) }}</span>
        <span class="tit2">客户尚未付款，请尽快收款</span>
        <view class="flex_start">
          <span class="tit3" v-if="saveMoney">保管费 ￥ {{ saveMoney }} 元</span>
          <span class="tit4" v-if="saveMoney" @click="showDialog"> 修改 </span>
        </view>
      </view>
    </view>

    <!-- 地址簿 -->
    <view class="card">
      <view class="address_card">
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/fa.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList.shipper }}{{ orderList.shipperMobile ? orderList.shipperMobile :
                orderList.shipperTel }}</span>
            </view>
            <view class="add_info">{{ orderList.shipperAdd || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/shou.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList.receiver }}{{ orderList.receiverMobile ? orderList.receiverMobile :
                orderList.receiverTel }}</span>
            </view>
            <view class="add_info">{{ orderList.receiverAdd || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">基本信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>承运单号</span><span>{{ orderList.billNo }}</span></view>
        <view class="con flex_start"><span>下单时间</span><span>{{ orderList.billingTime }}</span></view>
        <view class="con flex_start"><span>起运地</span><span>{{ orderList.startBranchName }}</span></view>
        <view class="con flex_start"><span>目的地</span><span>{{ orderList.destinationBranchName }}</span></view>
        <view class="con flex_start"><span>外转目的地</span><span>{{ orderList.outSourcingDestination }}</span></view>
        <view class="flex">
          <view class="con flex_start"><span>承运类型</span><span>{{ pickSendType(orderList.sendType) }}</span></view>
          <view class="con flex_start"><span>付款方式</span><span>{{ pickClearingForm(orderList.clearingForm) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>接货方式</span><span>{{ pickUpType(orderList.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>保价声明</span><span>￥{{ orderList.insuredMoney }}</span></view>
        </view>
        <view class="door_box gray_bg flex_start">
          <image class="img" src="@/assets/images/32pt@3x.png" />
          <view>
            <span class="t">上门接货时间</span>
            <span class="te">{{ orderList.receivingTime }}</span>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">货物信息</view>
      <view class="gray_bg">
        <view class="goods_card flex_between" v-for="(item, index) in orderList.goodsInfo" :key="index">
          <view class="flex_start">
            <span>{{ item.goodsName }}</span>
            <span :style="{ color: item.upNumber && item.upNumber !== item.goodsNumber ? '#0966FF' : '#666' }">{{
              filterGoodsNum(item) }}</span>
          </view>
          <view>{{ filterGoodsInfo(item) }}</view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">提货信息</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>提货方式</span><span>{{ pickUpType(orderList.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>直送服务</span><span>{{ pickDeliveryType(orderList.deliveryType) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>卸货类型</span><span>{{ pickDischargeServer(orderList.dischargeServer) }}</span>
          </view>
          <view class="con flex_start"><span>楼层电梯</span><span>{{ floorType }}</span></view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">代收货款</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>货款金额</span><span>￥{{ orderList.collectionMoney }}</span></view>
          <view class="con flex_start">
            <span>返还周期</span>
            <span v-if="orderList.returnCycle == 1">即日退</span>
            <span v-if="orderList.returnCycle == 2">三日退</span>
            <span v-if="orderList.returnCycle == 3">月结</span>
            <span v-if="!orderList.returnCycle">暂无数据</span>
          </view>
        </view>
        <view class="con flex_start">
          <span>返还方式</span>
          <span v-if="orderList.returnType == 1">会员卡返还</span>
          <span v-if="orderList.returnType == 2">银行卡返还</span>
          <span v-if="orderList.returnType == 3">微信返还</span>
          <span v-if="orderList.returnType == 4">支付宝返还</span>
          <span v-if="orderList.returnType == 5">现金返还</span>
          <span v-if="!orderList.returnType">暂无数据</span>
        </view>
        <view class="con flex_start"><span>银行卡号</span><span>{{ orderList.returunAccount || '暂无数据' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">更多服务</view>
      <view class="base_card">
        <view class="con flex_start"><span>单据服务</span><span>{{ orderList.billServer || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>包装服务</span><span>{{ orderList.packing ? '是' : '否' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">签单信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>签单单位</span><span>{{ orderList.billCompany || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>结算地</span><span>{{ orderList.clearAdd || '暂无数据' }}</span></view>
      </view>
    </view>
    <view class="btn_box">
      <view class="tip_box"><span class="font_gray">{{ detailShow ? '合计' : '待支付' }}</span><span class="pay">￥{{ Number(allPay) + Number(saveMoney) }}</span> <span @click="detailShow = true">明细</span></view>
      <view class="btn" @click="toPay()">我要收款</view>
    </view>

    <!-- 明细弹窗 -->
    <nut-popup position="bottom" closeable round :style="{ height: 'auto' }" v-model:visible="detailShow">
      <view class="costdetail">
        <view class="tabbar">费用明细</view>
        <view class="content costcontent">
          <h3>合计费用</h3>
          <h2><span>¥</span>{{ Number(allPay) + Number(saveMoney) }}</h2>
          <p v-for="(item, index) in orderList.costList" :key="index">
            <span>{{ item.ssopRemark }}</span>
            <span>¥ {{ item.actualMoney }}</span>
          </p>
          <p v-if="saveMoney">
            <span>保管费</span><span>￥{{ saveMoney }}</span>
          </p>
        </view>
      </view>
    </nut-popup>

    <!-- 保管费弹窗 -->
    <nut-dialog title="填写保管费" v-model:visible="saveMoneyShow" no-cancel-btn :before-close="verifySaveMoney">
      <template v-slot>
        <nut-input placeholder="请输入保管费" v-model="saveMoney" type="number" @input="handleSaveMoney" />
      </template>
    </nut-dialog>

  </view>
</template>

<script lang="ts" setup>
import Taro, { useReady, } from '@tarojs/taro'
import { ref, watch } from 'vue'
import useOrderStore from '@/store/order'
import { checkPickup, getTransStatus } from "@/@api/waybill";


const orderStore = useOrderStore()
const orderList = ref<any>();
orderList.value = orderStore.orderInfo

const floorType = ref('') // 楼层电梯
pickElevatorNum(orderList.dischargeElevator); // 初始化楼层


/* 初始化数据变量 start */
useReady(() => {
  Taro.setNavigationBarTitle({
    title: '运单详情'
  })
  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff',
  });
  countPay(); // 计算待付款
})

/* 计算待付款 */
const allPay = ref(0); // 待付款
function countPay() {
  // console.log(orderList.value, '待支付数据')
  orderList.value.costList.forEach((item) => {
    allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
  }
  );
}


/* 判断有无保管费 是否显示弹窗填写 */
function showDialog(){
  saveMoneyShow.value = true; // 
}

const saveMoneyShow = ref(false) // 保管费是否显示
const saveMoney = ref() // 前端填写的保管费
const params = {
  billNo: [orderList.value.billNo]
}

// 监听费用判断是否调保管费接口
watch(allPay, (value) => {
  if (value) {
    getcheckPickup();
  }
}, { immediate: true })


async function getcheckPickup() {
  const res = await checkPickup(params.billNo)
  if (res.data.code == 200) {
    console.log(res.data, '是否有保管费')
    if (res.data.data[0].hasStorageFee) {
      saveMoney.value = res.data.data[0].manageFee;
    } else {
      console.log('没有保管费')
    }
  }
  return true
}

// 校验保管费
function verifySaveMoney() {
  if (saveMoney.value && saveMoney.value < 5) {
    Taro.showToast({
      title: '保管费不得低于5元',
      icon: 'none',
      duration: 1000,
    });
  } else {
    saveMoneyShow.value = false;
  }
}

// 监听保管费的输入
function handleSaveMoney(event) {
  console.log(Number(event.detail.value), '输入的保管费')
  saveMoney.value = Number(event.detail.value)
}


function toPay() {
  // 判断是否产生保管费，如果有就填写再进行跳转
  console.log(saveMoney.value, '跳转跳转跳转')
  Taro.navigateTo({
    url: `/pages2/pay/index?saveMoney=${saveMoney.value}`
  });
}

/* 判断有无保管费 是否显示弹窗填写 */


/* 明细显示 */
const detailShow = ref(false); // 明细是否显示


/* 过滤承运类型 */
function pickSendType(val: string) {
  if (val == '1') {
    return '快件'
  } else if (val == '2') {
    return '普件'
  } else if (val == '3') {
    return '整车'
  } else if (val == '4') {
    return '560经济型'
  } else if (val == '5') {
    return '560商务型'
  } else if (val == '6') {
    return '次日达'
  } else if (val == '7') {
    return '隔日达'
  }
}

/* 过滤付款方式 */
function pickClearingForm(val: string) {
  if (val == '1') {
    return '签单'
  } else if (val == '2') {
    return '现付'
  } else if (val == '3') {
    return '提付'
  }
}

/* 过滤货物信息-名称件数 */
function filterGoodsNum(val) {
  const { upNumber, goodsNumber } = val;
  // console.log(upNumber, goodsNumber)
  let goodsNum;
  if (goodsNumber) {
    if (upNumber !== goodsNumber) {
      goodsNum = upNumber !== 0 ? '(' + upNumber + '/' + goodsNumber + ')' : goodsNumber
    } else {
      goodsNum = goodsNumber
    }
  }
  return (
    `${goodsNum}件`
  );
}


/* 过滤货物信息-重量体积包装 */
function filterGoodsInfo(val) {
  return (
    val.weigh +
    "kg," +
    val.goodsVolume +
    "m³," +
    val.packing
  );
}

/* 过滤提货方式 */
function pickUpType(val: string) {
  if (val == '1') {
    return '自提'
  } else if (val == '2') {
    return '送货'
  } else {
    return '直送'
  }
}

/* 过滤直送服务 */
function pickDeliveryType(val: string) {
  if (val == '1') {
    return '送商超'
  } else if (val == '2') {
    return '进仓'
  } else {
    return '报关'
  }
}

/* 过滤卸货类型 */
function pickDischargeServer(val: string) {
  if (val == '1') {
    return '标准件'
  } else if (val == '2') {
    return '非标准'
  } else {
    return '特殊件'
  }
}

/* 楼层电梯初始化 */
function pickElevatorNum(val: string) {
  if (val) {
    floorType.value = "电梯"
  } else {
    floorType.value = `楼梯：${orderList.elevatorNum ? orderList.elevatorNum : '1'}楼`
  }
}


/* 跳转物流详情 */
function toMapDetail() {
  console.log('物流详情跳转')
}

</script>


<style lang="scss">
.info_body {
  width: 750rpx;
  margin: 0 auto;
  background: #f5f5f5;
  padding: 16rpx 0;
  padding-bottom: 150rpx;

  .img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .tit1 {
    font-size: 32rpx;
    color: #FA5151;
    font-weight: bold;
    margin-bottom: 4rpx;
  }

  .tit2 {
    font-size: 24rpx;
    color: #999;
  }

  .tit3 {
    font-size: 24rpx;
    color: #999;
  }

  .tit4 {
    font-size: 24rpx;
    color: #0966FF;
  font-weight: bold;
  }

  .card {
    width: 702rpx;
    margin: 0 auto;
    padding: 24rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 16rpx auto;
    font-size: 24rpx;
    border-radius: 16rpx;

    .tit {
      font-size: 32rpx;
      color: #252525;
      font-weight: bold;
      margin-bottom: 24rpx;
      padding-bottom: 12rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }

    .gray_bg {
      width: 654rpx;
      box-sizing: border-box;
      background: #f5f5f5;
      padding: 12rpx;
      border-radius: 16rpx;
    }

  }

  .address_card {
    font-size: 32rpx;

    .icon {
      width: 72rpx;
      height: 72rpx;
    }

    .person {
      font-weight: 700;
      color: #252525;

      span:first-child {
        margin-right: 24rpx;
      }
    }

    .add_info {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }

  .base_card {
    .con {
      margin-bottom: 12rpx;

      span:first-child {
        margin-right: 24rpx;
        color: #999;
      }
    }
  }

  .door_box {
    .img {
      width: 80rpx;
      height: 80rpx;
    }

    .t {
      font-size: 24rpx;
      color: #999;
    }

    .te {
      font-size: 24rpx;
    }
  }

  .goods_card {
    padding: 12rpx;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .goods_card:last-child {
    border-bottom: none;
  }


  .btn_box {
    width: 750rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 105;

    .tip_box {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #252525;

      span {
        margin: 0 10rpx;
      }
    }

    .font_gray {
      color: #666;
    }

    .pay {
      color: #0966FF;
      font-size: 40rpx;
      font-weight: bold;
    }

    .btn {
      width: 230rpx;
      height: 88rpx;
      background: #0966FF;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
      color: #fff;
      border-radius: 44rpx;
    }
  }



  .costdetail {
    height: 100%;
    background-color: #f8f9fa;
    box-sizing: border-box;

    .tabbar {
      height: 112rpx;
      background-color: #fff;
      color: #252525;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 112rpx;
      padding-left: 24rpx;
    }

    .content {
      padding: 40rpx 116rpx;

      h3,
      h2 {
        text-align: center;
      }

      h3 {
        font-size: 24rpx;
        color: #252525;
        margin: 0;
        font-weight: 400;
      }

      h2 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 76rpx;
        font-weight: 600;
        color: #0966ff;
        margin: 14rpx 0 20rpx 0;

        span {
          font-size: 40rpx;
          padding-right: 8rpx;
        }
      }

      p {
        display: flex;
        justify-content: space-between;
        color: #666;
        font-size: 24rpx;
        margin: 28rpx 0;

        .van-icon {
          padding-right: 6rpx;
        }
      }

      .first {
        span {
          color: #252525;
          font-weight: 600;
          font-size: 28rpx;

          &:nth-child(2) {
            font-weight: 400;
          }
        }
      }
    }

    .costcontent {
      margin-bottom: 150rpx;
    }
  }

}

.flex {
  display: flex;

  .con {
    flex: 1;
  }
}

.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_up {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blue_font {
  color: #0966FF;
}

.gray_font {
  color: #666;
}
</style>